<template>
	<view>
		<view class="container">
			<view class="tit">意见内容：</view>
			<textarea class="txt" value="" maxlength="150" v-model="mark" placeholder="请输入反馈,我们将为您不断改进!" />
			<view class="tit">意见内容 (选填，提供内容截图)：</view>
			<view class="add-img-box">
				<view class="add-img" @click="addImage()">+照片</view>
				<view class="img-box" v-if="img_list">
					<image lazy-load="true"  :src="img_list" @click="showPreviewImg(img_list)" class="feed-img"></image>
					<text class="close" @click="deleteImg(key)">×</text>
				</view>
			</view>
			<view class="tit">手机号(选填)：</view>
			<input type="number" value="" class="in_put" v-model="phone" placeholder="请输入手机号"/>
		</view>
		<view class="sub-btn" @click="subFeed">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_list:'',
				imgList:'',
				imgArr:[],
				put_show:false,
				is_post:false,
				topic:'',
				imageBaseUrl:'https://weizong.file.cxbyi.com/images/',
				mark:'',
				phone:''
			}
		},
		onLoad() {
			var self = this;
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		methods: {
			deleteImg(key){
				this.imgList='';
				this.img_list='';
				this.imgArr=[];
			},
			showPreviewImg(url){
				uni.previewImage({
					urls:this.imgArr,
					current:url
				})
			},
			subFeed(){
				var self = this;
				if(self.mark==''){
					uni.showToast({
					    title: '请输入意见内容',
					    duration: 2000,
						icon:"none"
					});
				}else {
					if(self.phone && (!(/^1[3456789]\d{9}$/.test(self.phone)))){
						uni.showToast({
						    title: '请输入正确的手机号',
						    duration: 2000,
							icon:"none"
						});
					}else{
						self.$request.request({
							url:'/user/suggestions',
							data:{
								tel: self.phone,
								content:self.mark,
								image:self.img_list
								},							
							success:function(res){
								if (res.code == 200) {
										uni.showToast({
										    title: '提交成功',
										    duration: 2000,
											icon:"none"
										});	
									setTimeout(function(){
										uni.navigateBack({
										    delta: 1
										});
									},2000)
								}							
							}
						});
					}
					
				}
			},
			addImage(){
				var self = this;
				if(this.imgList.length<1){
					self.wx.chooseImage({
					  count: 1, 
					  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					  success: function(res) {
					    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					    localIds.forEach(function(e) {
					      self.wx.uploadImage({
					        localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
					        isShowProgressTips: 1, // 默认为1，显示进度提示
					        success: function(res) {
					          var serverId = res.serverId; 
							  uni.showLoading({
							      title: '请稍后~'
							  });
							  self.$request.request_config({
							  	url:'/web/wechat/upload_image',
							  	data:{
									media_id: serverId,
									 // media_id: 'GrqrFWcrrm_6VInRQ6iKKw2hRzdhlA6qvKm8wijt8CtMeKdBDMpMz1DEcyxlFKvr',
								},
							  	success:function(res){
							  		if (res.code == 200) {
							  		  var img_uri = res.result[0].uri;
							  		  if(img_uri){
							  		  	setTimeout(function() {
							  		  		uni.hideLoading();
							  		  		self.img_list=img_uri;
							  		  		self.imgList=img_uri;
											self.imgArr.push(img_uri)
							  		  	}, 3000);
							  		  }else{
										uni.hideLoading();
							  		  	uni.showToast({
							  		  	    title: res.result[0].msg,
							  		  	    duration: 2000,
							  		  		icon:"none"
							  		  	});
							  		  }
							  		}else{
							  			uni.hideLoading();
							  		}
							  	}
							  });
					      
					        }
					      });
					    });
					  }
					});
				}
				else{
					uni.showToast({
					    title: '最多只能上传一张图片',
							icon:"none",
					    duration: 2000
					});
				}
			},
		}
	}
</script>

<style>
.container{
	display: flex;
	flex-direction: column;
	width: 95%;
	margin-left: 2.5%;
	margin-top: 20upx;
}
.tit{
	font-size: 16px;
	margin-bottom: 10upx;
}
.txt{
	box-sizing: border-box;
	background-color:#f0f0f0 ;
	width: 100%;
	height: 300upx;
	font-size: 14px;
	padding: 10upx;
	border-radius: 10px;
	margin-bottom: 10upx;
}
.img-box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	width: 210upx;
	height: 190upx;
}
.add-img-box{
	display: flex;
	flex-direction: row;
	margin-bottom: 20upx;
}
.feed-img{
	width: 210upx;
	height: 190upx;
	background-color: #F0F0F0;
}
.add-img{
	width: 210upx;
	height: 190upx;
	background-color: #F0F0F0;
	text-align: center;
	line-height: 190upx;
	font-size: 14px;
	margin-top: 10upx;
}
.sub-btn{
	position: fixed;
	width: 100%;
	height: 90upx;
	color: #FFFFFF;
	font-size: 16px;
	left: 0;
	bottom: 0;
	background-color: #859dc2;
	text-align: center;
	line-height: 90upx;
}
.close{
	position: absolute;
	width: 20px;
	height: 20px;
	right: 5px;
	top:5px;
	border-radius: 50%;
	background-color: #FFFFFF;
	text-align: center;
	line-height: 20px;
}
.in_put{
	border: 1px solid #F0F0F0;
	width: 670upx;
	border-radius: 10upx;
	padding: 20upx;
}
</style>
